<template>
  <div id="collectionRoot">
    <el-tabs v-model="activeName">
      <el-tab-pane label="达人收藏" name="0">
        <TalentCollection v-if="activeName == '0'" />
      </el-tab-pane>
      <el-tab-pane label="视频收藏" name="1">
        <VideoCollection v-if="activeName == '1'" />
      </el-tab-pane>
      <el-tab-pane label="音乐收藏" name="2">
        <MusicCollection v-if="activeName == '2'" />
      </el-tab-pane>
      <el-tab-pane label="话题收藏" name="3">
        <TopicCollection v-if="activeName == '3'" />
      </el-tab-pane>
      <el-tab-pane label="商品收藏" name="4">
        <GoodsCollection v-if="activeName == '4'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TalentCollection from "./talentCollection.vue";
import MusicCollection from "./musicCollection.vue";
import TopicCollection from "./topicCollection.vue";
import VideoCollection from "./videoCollection.vue";
import GoodsCollection from "./goodsCollection.vue";
export default {
  name: "collectionRoot",
  components: {
    TalentCollection,
    MusicCollection,
    TopicCollection,
    VideoCollection,
    GoodsCollection
  },
  data() {
    return {
      activeName: "0",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},

  methods: {},
};
</script>
<style lang='less' scoped>
#collectionRoot {
  background: #f1f1f1;
  height: fit-content;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  border-radius: 4px;
  min-height: 100vh;
  position: relative;
  img{
    outline: none;
  }
}
</style>